﻿<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>iNEWU 爱牛油 - 在线观看免费正版高清亚洲电视剧、电影、综艺、动漫 - 独家韩剧、陆剧、泰剧 </title>
        <link href="favicon.ico" rel="shortcut icon">
	    <script src="js/common/axios.min.js"></script>
        <script src="js/common/vue.js"></script>
        <script src="js/common/template.js"></script>
        <script src="js/common/vue-resource.js"></script>
        <script src="js/common/httpVueLoader.js"></script>
        <!-- <script src="js/common/translate.js"></script> -->
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="https://cdn.tailwindcss.com"></script>
        <style type="text/css">
            [v-cloak]{
              display: none;
            }
        </style>
    </head>
    <body>
        <div id="contn">
            <v-header @call-login="showLogin"></v-header>
            <v-main @add-notice="addNotice" ></v-main>
            <!-- <v-footer></v-footer> -->
            <v-notice ref="noticeRef"></v-notice>
            <v-side ref="sideRef"></v-side>
            <v-login ref="loginRef" @call-add-notice="addNotice" @call-token="updtTokenFunc"></v-login>
        </div>
        <template id="vMain">
            <main v-cloak>
                <div class="banner">
                    <div class="fluid">
                        <div class="swp-box">
                            <div class="swp">
                                <div class="pic slide cursor">
                                    <a href="play.html" class="item fill" v-for="(item,i) in banner" :class="{active:i == currInd}">
                                        <img :src="item.cover" class="obj-c">
                                    </a>
                                </div>
                                <div class="des dc cursor slide">
                                    <a href="play.html" class="item" v-for="(item,i) in banner" :class="[{active:i == currInd},i == currInd?'':'noTouch']">
                                        <p class="name">{{item.name}}</p>
                                        <div class="type flex" v-if="item.types.length">
                                            <p v-for="sItm in item.types" :class="{other:sItm.ifOther}">
                                                <span>{{sItm.val}}</span>
                                                <span v-if="sItm.ifOther">{{sItm.other}}</span>
                                            </p>
                                        </div>
                                        <div class="dtl flex flex-align-items">
                                            <div class="score flex flex-align-items">
                                                <img src="img/common/score.png"><p>{{item.score}}</p>
                                            </div>
                                            <i></i>
                                            <p class="age">{{item.age}}</p>
                                            <i></i>
                                            <p class="year">{{item.year}}</p>
                                            <i></i>
                                            <p class="series">{{item.series}}</p>
                                        </div>
                                        <div class="tags flex flex-wrap">
                                            <p v-for="sItm in item.tags">{{sItm}}</p>
                                        </div>
                                        <p class="intro l3">{{item.introduce}}</p>
                                    </a>
                                    
                                </div>
                                <div class="btn next mid" @click="swp('next')">
                                    <img src="img/common/arw2.png" class="hvc">
                                </div>
                                <div class="btn prev mid" @click="swp('prev')">
                                    <img src="img/common/arw2.png" class="hvc">
                                </div>           
                                <div class="play-collect flex">
                                    <p class="btn mid r50 play">
                                        <img src="img/common/triangle.png" class="hvc">
                                    </p>
                                    <p class="btn mid r50 collect">
                                        <img src="img/common/collect.png" class="hvc">
                                    </p>
                                </div>
                                <div class="pagination flex">
                                    <p v-for="(item,i) in banner" :class="{active:i == currInd}"></p>
                                </div>                     
                                <div class="lft noTouch"></div>
                                <div class="top noTouch"></div>
                                <div class="rht noTouch"></div>
                                <div class="btm noTouch"></div>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div class="media">
                    <div class="fluid">
                        <p class="ttl">{{home[0].ttl}}</p>
                        <div class="list-contain">
                            <div class="list-box">
                                <div class="list flex">
                                    <a href="info.html" class="item cursor" 
                                    v-for="(item,i) in home[0].list"
                                    @mouseenter="hover(item,$event)"
                                    @mouseleave="leave(item,$event)">
                                        <div class="mid cover">
                                            <img :src="item.cover" class="fc">
                                            <div class="series">
                                                <p class="t">38集全</p>
                                            </div>
                                            <div class="right-top">TOP<span>10</span></div>
                                        </div>
                                        <div class="txt">
                                            <p class="name l2">{{item.name}}</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="next cursor flip-btn vc" 
                            v-if="home[0].list.length > home[0].row && home[0].currPage != home[0].pages"
                            @click="flip('next',0)">
                                <img src="img/common/arw2.png">
                            </div>
                            <div class="prev cursor flip-btn vc" 
                            v-if="home[0].currPage > 1"
                            @click="flip('prev',0)">
                                <img src="img/common/arw2.png">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="library">
                    <div class="fluid flex flex-wrap">
                        <a href="library.html" class="flex flex-align-items" v-for="(item,i) in library">
                            <img src="img/index/all.png" v-if="!i">
                            {{item.name}}</a>
                    </div>
                </div>
                <div class="continue media">
                    <div class="fluid has-expand">
                        <p class="ttl">继续看</p>
                        <div class="list-contain">
                            <div class="list-box">
                                <div class="flex list">
                                    <div class="item" v-for="(item,i) in home[1].list" 
                                    :class="{log:item.type == 'log'}">
                                        <div class="cover mid">
                                            <template v-if="item.type == 'log'">
                                                <img src="img/index/continue.png" class="fc">
                                                <div class="hvc">
                                                    <p class="t">同步多设备观看历史</p>
                                                    <p class="btn iv">登录</p>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <img :src="item.cover" class="fc">
                                                <div class="progress">
                                                    <p class="per" :style="{width:item.percent + '%'}"></p>
                                                </div>
                                                <p class="mid r50 play">
                                                    <img src="img/common/triangle.png" class="hvc">
                                                </p>
                                            </template>
                                            
                                        </div>
                                        <div class="txt">
                                            <p class="l2 name">{{item.name}}</p>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="next cursor flip-btn vc" 
                            v-if="home[1].list.length > home[1].row && home[1].currPage != home[1].pages"
                            @click="flip('next',1)">
                                <img src="img/common/arw2.png">
                            </div>
                            <div class="prev cursor flip-btn vc" 
                            v-if="home[1].currPage > 1"
                            @click="flip('prev',1)">
                                <img src="img/common/arw2.png">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ad tv fluid">
                    <img src="img/index/tv.png" class="obj-c">
                </div>
                <div class="ad tv fluid">
                    <img src="img/index/ad.jpg" class="obj-c">
                </div>
                <template v-for="(item,i) in home">
                    <div class="media" v-if="i >= 2" :class="{star:item.type == 'star'}">
                        <div class="fluid">
                            <p class="ttl">{{item.ttl}}</p>
                            <div class="list-contain">
                                <div class="list-box">
                                    <div class="list flex">
                                        <a :href="item.type == 'star'?'actor.html':'info.html'" target="_blank" class="item cursor" 
                                        v-for="(sItm,i) in item.list"
                                        @mouseenter="hover(sItm,$event,item.type)"
                                        @mouseleave="leave(sItm,$event,item.type)">
                                            <template v-if="item.type == 'star'">
                                                <div class="mid avatar r50">
                                                    <img :src="sItm.url" class="fc">
                                                </div>
                                                <p class="l1 name">{{sItm.name}}</p>
                                            </template>
                                            <template v-else>
                                                <div class="mid cover">
                                                    <img :src="sItm.cover" class="fc">
                                                    <div class="series">
                                                        <p class="t">38集全</p>
                                                    </div>
                                                    <div class="right-top">TOP<span>10</span></div>
                                                </div>
                                                <div class="txt">
                                                    <p class="name l2">{{sItm.name}}</p>
                                                </div>
                                            </template>
                                            
                                        </a>
                                    </div>
                                </div>
                                <div class="next cursor flip-btn vc" 
                                v-if="item.list.length > item.row && item.currPage != item.pages"
                                @click="flip('next',i)">
                                    <img src="img/common/arw2.png">
                                </div>
                                <div class="prev cursor flip-btn vc" 
                                v-if="item.currPage > 1"
                                @click="flip('prev',i)">
                                    <img src="img/common/arw2.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <!-- <a href="" class="" ref="mediaInfoRef"></a> -->
                <div class="foot">
                    <div class="box flex-between flex">
                        <div class="item">
                            <p></p>
                        </div>
                    </div>
                </div>
            </main>
        </template>
        <!-- <script src="https://cdn.staticfile.net/translate.js/3.4.0/translate.js"></script> -->
        
        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="js/common/dataUrl.js"></script>
        <script>
            Vue.use(httpVueLoader);
            var contn = new Vue({
                el:'#contn',
                data:{
                   
                },
                methods:{
                    addNotice(msg,type){
                        console.log(msg,type);
                        this.$refs.noticeRef.add({
                            msg:msg,
                            type:type,
                            time:new Date().getTime()
                        });
                    },
                    showLogin(){
                        this.$refs.loginRef.hdlShow();
                    },
                    updtTokenFunc(){
                        this.$refs.loginRef.updtToken();
                    },
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    'v-header': 'url:./js/common/v-header.vue',
                    // 'v-footer': 'url:./js/common/v-footer.vue',
                    'v-notice': 'url:./js/common/v-notice.vue',
                    'v-login': 'url:./js/common/v-login1.vue',
                    'v-side': 'url:./js/common/v-side.vue',
                    vMain:{
                        template: '#vMain',
                        data:function(){
                            return{
                                sizeRange:[1680,1024,768,0],
                                currInd:0,
                                autoSwp:true,
                                autoSwpInt:null,
                                swping:false,
                                banner:[
                                    {
                                        name:'一笑隋哥',
                                        cover:'img/index/s4.jpg',
                                        types:[
                                            {val:'TOP1',ifOther:true,other:'热播榜'},
                                            {val:'独播'},
                                        ],
                                        score:'9.8',
                                        age: '13+',
                                        year: '2023',
                                        series: '36集全',
                                        tags:['中国大陆','战争','古装'],
                                        introduce:'热血少年 拯救人间'
                                    },
                                    {
                                        name:'爱你',
                                        cover:'img/index/s2.jpg',
                                        types:[
                                            {val:'TOP7',ifOther:true,other:'热播榜'},
                                        ],
                                        score:'9.8',
                                        age: '13+',
                                        year: '2023',
                                        series: '36集全',
                                        tags:['中国大陆','古装'],
                                        introduce:'热血少年 拯救人间'
                                    },
                                    {
                                        name:'神国之上',
                                        cover:'img/index/s3.jpg',
                                        types:[
                                            {val:'自制'},
                                        ],
                                        score:'9.8',
                                        age: '13+',
                                        year: '2023',
                                        series: '36集全',
                                        tags:['古装'],
                                        introduce:'热血少年 拯救人间'
                                    },
                                    {
                                        name:'仙宠',
                                        cover:'img/index/s1.png',
                                        types:[
                                            {val:'免费'},
                                        ],
                                        score:'9.8',
                                        age: '13+',
                                        year: '2023',
                                        series: '36集全',
                                        tags:['中国大陆','战争','古装','战争','古装'],
                                        introduce:'热血少年 拯救人间'
                                    },
                                    {
                                        name:'向峰而行',
                                        cover:'img/index/s5.jpg',
                                        types:[],
                                        score:'9.8',
                                        age: '13+',
                                        year: '2023',
                                        series: '36集全',
                                        tags:['中国大陆','战争','古装'],
                                        introduce:'热血少年 拯救人间'
                                    },
                                ],
                                home:[
                                    {
                                        row:8,
                                        rowAry:[8,6,4,3],
                                        ttl:'热门推荐',
                                        list:[
                                            {name:'与晋长安',cover:'img/index/cover.png'},
                                            {name:'与晋长安',cover:'img/index/1.jpg'},
                                            {name:'与晋长安',cover:'img/index/2.jpg'},
                                            {name:'与晋长安',cover:'img/index/3.jpg'},
                                            {name:'与晋长安',cover:'img/index/4.jpg'},
                                            {name:'与晋长安',cover:'img/index/5.jpg'},
                                            {name:'与晋长安',cover:'img/index/6.jpg'},
                                            {name:'与晋长安',cover:'img/index/7.jpg'},
                                            {name:'与晋长安',cover:'img/index/8.jpg'},
                                            {name:'与晋长安',cover:'img/index/9.jpg'},
                                            {name:'与晋长安',cover:'img/index/10.jpg'},
                                            {name:'与晋长安',cover:'img/index/11.jpg'},
                                            {name:'与晋长安',cover:'img/index/12.jpg'},
                                            {name:'与晋长安',cover:'img/index/13.jpg'},
                                            {name:'与晋长安',cover:'img/index/14.jpg'},
                                        ],
                                        
                                    },
                                    
                                    {
                                        row:6,
                                        rowAry:[6,4,3,2],
                                        ttl:'继续看',
                                        list:[
                                            {name:'三更雪',cover:'img/index/c1.jpg',percent:30},
                                            {name:'三更雪',cover:'img/index/c1.jpg',percent:30},
                                            {name:'三更雪',cover:'img/index/c1.jpg',percent:30},
                                            {name:'三更雪',cover:'img/index/c1.jpg',percent:30},
                                            {name:'三更雪',cover:'img/index/c1.jpg',percent:30},
                                            {name:'三更雪',cover:'img/index/c1.jpg',percent:30},
                                        ]
                                    },
                                    {
                                        row:8,
                                        rowAry:[8,6,4,3],
                                        ttl:'为你推荐',
                                        list:[
                                            {name:'与晋长安',cover:'img/index/cover.png'},
                                            {name:'与晋长安',cover:'img/index/1.jpg'},
                                            {name:'与晋长安',cover:'img/index/2.jpg'},
                                            {name:'与晋长安',cover:'img/index/3.jpg'},
                                            {name:'与晋长安',cover:'img/index/4.jpg'},
                                            {name:'与晋长安',cover:'img/index/5.jpg'},
                                            {name:'与晋长安',cover:'img/index/6.jpg'},
                                            {name:'与晋长安',cover:'img/index/7.jpg'},
                                            {name:'与晋长安',cover:'img/index/8.jpg'},
                                            {name:'与晋长安',cover:'img/index/9.jpg'},
                                            {name:'与晋长安',cover:'img/index/10.jpg'},
                                            {name:'与晋长安',cover:'img/index/11.jpg'},
                                            {name:'与晋长安',cover:'img/index/12.jpg'},
                                            {name:'与晋长安',cover:'img/index/13.jpg'},
                                            {name:'与晋长安',cover:'img/index/14.jpg'},
                                        ],
                                    },
                                    {
                                        row:11,
                                        rowAry:[11,8,6,4],
                                        gap:30,
                                        gapAry:[30,18,16],
                                        ttl:'人气明星',
                                        type:'star',
                                        list:[
                                            {name:'陈哲远',url:'img/index/a1.jpg'},
                                            {name:'李沁',url:'img/index/a2.jpg'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg'},
                                            {name:'陈哲远',url:'img/index/a1.jpg'},
                                            {name:'李沁',url:'img/index/a2.jpg'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg'},
                                            {name:'陈哲远',url:'img/index/a1.jpg'},
                                            {name:'李沁',url:'img/index/a2.jpg'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg'},
                                            {name:'陈哲远',url:'img/index/a1.jpg'},
                                            {name:'李沁',url:'img/index/a2.jpg'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg'},
                                            {name:'陈哲远',url:'img/index/a1.jpg'},
                                            {name:'李沁',url:'img/index/a2.jpg'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg'},
                                            {name:'陈哲远',url:'img/index/a1.jpg'},
                                            {name:'李沁',url:'img/index/a2.jpg'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg'},
                                            
                                        ],
                                    },
                                ],
                                dly:null,
                                continueWatch:[],
                                library:[
                                    {name:'全部节目'},
                                    {name:'中国大陆'},
                                    {name:'韩国'},
                                    {name:'泰国'},
                                    {name:'台湾地区'},
                                    {name:'日本'},
                                    {name:'马来西亚'},
                                    {name:'美国'},
                                    {name:'英国'},
                                    {name:'青春'},
                                    {name:'悬疑'},
                                    {name:'LGBT'},
                                    {name:'古装'},
                                    {name:'都市'},
                                    {name:'爱情'},
                                    {name:'甜宠'},
                                    {name:'婚姻'},
                                    {name:'剧情'},
                                    {name:'喜剧'},
                                    {name:'家庭'},
                                    {name:'友谊'},
                                    {name:'奇幻'},
                                    {name:'犯罪'},
                                    {name:'战争'},
                                ]
                            }
                        },
                        methods:{
                            collect(ind){
                                this.$refs.noticeRef.add({
                                    msg:'收藏成功',
                                    type:'success',
                                    time:new Date().getTime()
                                });
                            },
                            leave(row,e,type){
                                if(type == 'star') return false;
                                clearTimeout(this.dly);
                                this.dly = null;
                            },
                            hover(row,e,type){
                                if(type == 'star' || window.innerWidth < 768) return false;
                                $('.media-info').remove(); 
                                clearTimeout(this.dly);
                                this.dly = null;
                                let pos = e.target.getBoundingClientRect();
                                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                                // this.$refs.mediaInfoRef;
                                let width = e.target.offsetWidth * 1.349;
                                let widthOffset = e.target.offsetWidth * 0.349 / 2;
                                
                                let html = `<div class="mid cover">
                                    <img src="${row.cover}" class="fc">
                                    <p class="fill"></p>
                                    <div class="right-top">TOP<span>10</span></div>
                                    <div class="play-collect flex">
                                        <a href="play.html" target="_blank" class="btn mid r50 play-btn">
                                            <img src="img/common/triangle.png" class="hvc">
                                        </a>
                                        <div class="btn mid r50 collect pop-parent expandHover">
                                            <img src="img/common/collect.png" class="hvc">
                                            <div class="pop">
                                                <p>加入收藏</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="txt">
                                    <p class="name l1">${row.name}</p>
                                    <div class="num flex flex-align-items">
                                        <div class="score flex flex-align-items">
                                            <img src="img/common/score.png"><p>9.8</p>
                                        </div>
                                        <i></i>
                                        <p class="age">13+</p>
                                        <i></i>
                                        <p class="year">2023</p>
                                    </div>
                                    <div class="tags flex flex-wrap">
                                        <p>中国大陆</p>
                                        <p>战争</p>
                                        <p>古装</p>
                                    </div>
                                    <div class="des">
                                        <p class="l1">《与晋长安》改编自九鹭非香(《苍兰诀》)
                                            的同名小说，是由邓科(《折腰》)导演，宋
                                            轶(《颜心记》、《伪装者》、《庆余年》)、丞
                                            磊(《大梦归离》、《云之羽》)、毕雯珺(《爱
                                            你》、《九霄寒夜暖》)、史策(《狗剩快跑》潸</p>
                                    </div>
                                    <div class="more flex flex-align-items">
                                        <p>更多信息</p>
                                        <img src="img/common/arw1.png">
                                    </div>
                                </div>`;
                                // let elA = $("<a></a>").html(html);
                                // elA.attr('href','info.html');
                                let elA = $("<div></div>").html(html);
                                elA.addClass('media-info');
                                elA.css('width',`${width}px`);
                                elA.css('top',`${scrollTop + pos.top - 20}px`);
                                elA.css('left',`${pos.left - widthOffset}px`);
                                elA.on('mouseleave', function() {
                                    console.log('del;');
                                    $('.media-info').remove(); 
                                })
                                this.dly = setTimeout(()=>{
                                    $("main").append(elA);
                                },100);
                            },
                            writingWeb(){
                                var This = this;
                            },
                            handleResize() {
                                let ary = newObj(this.home);
                                let This = this;
                                ary.forEach(item => {
                                    
                                    for(var r = 0;r < This.sizeRange.length;r++){
                                        if(window.innerWidth >= This.sizeRange[r]){
                                            item.row = item.rowAry[r];
                                            if(item.type == 'star'){
                                                item.gap = item.gapAry[r];
                                            }else{
                                                item.gap = 16;
                                            }  
                                            if(window.innerWidth < 768){
                                                item.gap = 8;
                                            }
                                            break;
                                        }
                                    } 
                                    
                                    
                                    
                                });
                                this.home = ary;
                                this.init();
                                $(`main .media .list`).removeClass('active');
                                $(`main .media .list`).css('transform','');
                                console.log('当前窗口宽度:', window.innerWidth)
                            },
                            init(){
                                let ary = newObj(this.home);
                                let This = this;
                                ary.forEach(item => {
                                    item.currPage = 1;
                                    item.pages = Math.ceil(item.list.length / item.row);
                                    item.intPage = item.list.length % item.row || true;
                                });
                                console.log(ary);
                                this.home = ary;
                            },
                            flip(type,ind){
                                console.log($(`main .media:eq(${ind})`));
                                let ary = newObj(this.home);
                                let rowW = $(`main .media:eq(${ind}) .list .item`)[0].offsetWidth + ary[ind].gap;
                                let distance;
                                if(type == 'next'){
                                    $(`main .media:eq(${ind}) .list`).addClass('active');
                                    ary[ind].currPage++;
                                }else{
                                    ary[ind].currPage--
                                }
                                if(ary[ind].currPage == ary[ind].pages && ary[ind].intPage !== true){
                                    console.log('最后，非整数页')
                                    distance = rowW * ary[ind].row * (ary[ind].pages - 2) + rowW * ary[ind].intPage;
                                }else{
                                    distance = rowW * ary[ind].row * (ary[ind].currPage - 1);
                                }
                                console.log(rowW,ary[ind],distance);
                                $(`main .media:eq(${ind}) .list`).css('transform',`translateX(-${distance}px)`);
                                this.home = ary;
                            },
                            swp(type){
                                if(this.swping) return false;
                                let This = this;
                                if(type == 'next'){
                                    this.currInd++;
                                    this.currInd >= this.banner.length && (this.currInd = 0);
                                }else{
                                    this.currInd--;
                                    this.currInd < 0 && (this.currInd = this.banner.length - 1);
                                }     
                                this.swping = true;
                                setTimeout(()=>{
                                    This.swping = false;
                                },1210)
                                clearInterval(this.autoSwpInt);
                                this.autoSwpInt = null;
                                this.swpAuto();
                            },
                            swpAuto(){
                                let This = this;
                                this.autoSwpInt = setInterval(()=>{
                                    this.currInd++;
                                    this.currInd >= this.banner.length && (this.currInd = 0);
                                },6000);
                            }
                        },
                        beforeDestroy() {
                            window.removeEventListener('resize', this.handleResize)
                        },
                        mounted:function(){
                            if(this.autoSwp){
                                this.swpAuto();
                            }
                            if(!localStorage.getItem('token')){
                                let home = newObj(this.home);
                                let continueInd = getMatchedIndex(home,'继续看','ttl');
                                home[continueInd].list.splice(0,0,{type:'log'});
                                this.home = home;
                                console.log(home);
                            }
                            window.addEventListener('resize', this.handleResize)
                            this.writingWeb();
                            this.handleResize();
                            this.init();
                        }
                    },
                },
            })
            
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>